<template>
    <div class="leftBottom">
         <div v-if="isGongye">
            <div v-for="(item,index) in dianliInfo" :key="index">
                <div :id="'yuanzhu'+ index" 
                    style="position: absolute; left: 0px; top: 0px;z-index:3;width: fit-content;">
                    <div style="text-align:center">
                        {{item.name}}/{{item.value}}
                    </div>
                    <div class="yuanzhu">

                    </div>
                </div>
            </div>
        </div>
        <div class="leftBottomLeft">
            <div class="title">
                <div class="titleImg"></div> 
                <div>
                    复工复产 
                </div>
            </div>
            <div class="list">
                <div class="list1" @click="jiankangma">
                    <div  class="listImg">
                        
                    </div>
                    <div  class="listContent">
                        <div>{{jiankangmaNum}}</div>
                        <div class="num-content">健康码申请量</div>
                    </div>
                    <div class="details">
                        详情
                    </div>
                </div>
                <div class="list2"  @click="gaosu">
                    <div  class="listImg">
                    </div>
                    <div  class="listContent">
                        <div>入{{gaosuRuNum}}<br/>出{{gaosuChuNum}}</div>
                        <div class="num-content">高速出入流量(当天)</div>
                    </div>
                    <div class="details">
                        详情
                    </div>
                </div>
                <div class="list3"  @click="shouji">
                    <div  class="listImg">
                        
                    </div>
                    <div  class="listContent">
                        <div>{{shoujiNum}}万</div>
                        <div class="num-content">县域内手机活跃数</div>
                    </div>
                    <div class="details">
                        详情
                    </div>
                </div>
                <div class="list4"  @click="dianliang">
                    <div  class="listImg">
                    </div>
                    <div  class="listContent">
                        <div>{{dianliangNum}}</div>
                        <div class="num-content">工业复工电量KWH</div>
                    </div>
                    <div class="details">
                        详情
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
const group = new GV.GraphicGroup();
let threeALonLat = [
    [118.399128,29.14132],
    [118.237213,29.226437],
    [118.161613,29.261416],
    [118.3918,29.083761],
    [118.312399,29.08536],
    [118.40993,29.176694],
    [118.335919,29.472327],
    [118.416643,29.33639],
    [118.42563,29.289723],
    [118.221823,29.399964],
    [118.173021,29.016893]    
]
export default {
    data(){
        return {
            jiankangmaNum:313456,
            gaosuRuNum:35900,
            gaosuChuNum:31000,
            shoujiNum:26.123,
            dianliangNum:48878,
            isJiankangma:false,
            isGaosu:false,
            isshouji:false,
            isGongye:false,
            random1:0,
            random2:0,
            shoujiNewLength:0,
            dianliInfo:[
                {name:"浙江开化工业园区",value:'22000万KWH'},
                {name:"开化工业园区绿色产业孵化园",value:'6000万KWH'},
                {name:"开化县电商创业孵化园",value:'4000万KWH'}
            ],
            dianliArr : [
                [118.406291,29.09749],
                [118.398994,29.093054],
                [118.406829,29.121884]
            ]
        }
    },
    mounted(){
        setInterval(()=>{
            this.jiankangmaNum += 1,
            this.gaosuRuNum += 1,
            this.gaosuChuNum += 1,
            this.shoujiNum = this.shoujiNum*10000;
            this.shoujiNum += 1,
            this.shoujiNum = (this.shoujiNum/10000).toFixed(4)
            this.dianliangNum += 1
        },1000)
    },
    methods:{
        addPloygonLine(){
            axios.get('./data/乡镇.geojson').then(res=>{
                let datas = res.data.features;
                //[0].geometry.coordinates[0];
                datas.forEach((element ,index)=> {
                this.$cp.addPloygonLine("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]), Cesium.Color.WHITE)
                //this.$cp.addPloygon('xiangjie'+index,[].concat.apply([], element.geometry.coordinates[0][0]))
                //this.$cp.addPloygonLine("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0]), Cesium.Color.ORANGE)
                });
            })
        },
        removePloygonLine(){
            for(let i = 0;i<14;i++){
                 viewer.entities.removeById("xiangjie"+i)
            }
        },
        jiankangma(){
            this.$cp.flyTo(118.35319899720683,28.575263168288448,105598,6.230931256407987,-1.0038461609351086,0.0004425358485908859)
            this.isJiankangma = !this.isJiankangma
            if(this.isJiankangma){
                this.addPloygonLine()
                let index = 0;
                this.jiankangTimer = setInterval(()=>{
                    if(viewer.entities.getById("jiankangma")){
                        viewer.entities.removeById("jiankangma")
                    }
                    if(index<threeALonLat.length){
                        index += 1;
                    }else{
                        index = 0
                    }
                    let x=1;
                    let flog=true;
                    viewer.entities.add({
                        id:"jiankangma",
                        position:Cesium.Cartesian3.fromDegrees(threeALonLat[index][0],threeALonLat[index][1],10),
                        point : {
                            show : true, // default
                            color :new Cesium.CallbackProperty(function () {
                                if(flog){
                                    x=x - 0.05;
                                    if(x<=0){
                                        flog=false;
                                    }
                                }else{
                                    x=x + 0.05;
                                    if(x>=1){
                                        flog=true;
                                    }
                                }
                                return Cesium.Color.RED.withAlpha(x);
                            },false),
                            pixelSize : 10, // default: 1
                            outlineWidth :0
                        }
                    });
                },3000)
            }else{
                this.removePloygonLine()
                clearInterval(this.jiankangTimer)
                this.jiankangTimer = null
                viewer.entities.removeById("jiankangma")
            }
        },
        gaosu(){
            this.$cp.flyTo(118.35319899720683,28.575263168288448,105598,6.230931256407987,-1.0038461609351086,0.0004425358485908859)
            let gaosuArr = [
                [[118.431031,29.153445],[118.419411,29.143598]],
                [[118.403587,29.089886],[118.419411,29.143598]],
                [[118.159255,29.065364],[118.419411,29.143598]],
                [[118.397697,29.303844],[118.419411,29.143598]],
                [[118.49641,29.12856],[118.419411,29.143598]]
            ]
            this.isGaosu = !this.isGaosu
            if(this.isGaosu){
                this.addPloygonLine()
                gaosuArr.forEach((item,index)=>{
                    let arrow1 = new GV.ParabolaLineGraphic({
                        positions: [new GV.GeoPoint(item[0][0], item[0][1], 20),new GV.GeoPoint(item[1][0], item[1][1], 20)],
                        lineStyle: new GV.DynamicStyle({
                            color: '#00FF99',
                            icon: GV.DynamicIconEnum.Arrow,
                            duration: 1000
                        }),
                        width: index*3==0?2:index*3, //线宽
                        factor: 500,
                        step: 50,
                        interpolation: true
                    });
                    group.add(arrow1)
                })
                viewer.graphicLayer.add(group);
            }else{
                this.removePloygonLine()
                viewer.graphicLayer.remove(group);
            }
        },
        shouji(){
            this.$cp.flyTo(118.35319899720683,28.575263168288448,105598,6.230931256407987,-1.0038461609351086,0.0004425358485908859)
            let shoujiArr = [
                [118.382,29.077],[118.396,29.084],[118.348,29.019],[118.213,29.003],[118.191,29.06],[118.241,29.005],[118.367,28.996],[118.357,29.009],[118.305,29.418],[	118.337,29.41],
                [118.261,29.362	],[118.301,29.346],[118.213,29.285],[118.23,29.327],[118.424,29.351],
                [118.44,29.327],[118.419,29.22],[118.399,29.199	],[118.561,29.284],[118.553,29.166],[118.478,29.115],[118.382,29.107],[	118.384,29.105],[118.393,29.102],[118.392,29.097],
                [118.4,29.09],[118.398,29.083],[118.393,29.086],[118.393,29.116],[118.405,29.129 ],[ 118.398,29.132	],[118.405,29.132],[118.395,29.131],[118.401,29.131	],[118.398,29.116],
                [118.398,29.124],[118.404,29.119],[118.404,29.124],[118.408,29.147],[118.413,29.143],[118.408,29.143],[118.413,29.147],[118.411,29.144],[118.425,29.141],[118.411,29.143],
                [118.425,29.14	],[118.4,29.131],[118.424,29.14	],[118.398,29.117	],[118.423,29.14	],[	118.398,29.118],[	118.423,29.139],[	118.398,29.119],[	118.423,29.138],
                [118.398,29.120],[118.423,29.137],[118.398,29.121],[118.423,29.138],[118.398,29.122],[118.424,29.138],[118.398,29.123],[	118.425,29.138],[	118.4,29.123],
                [118.426,29.138],[118.401,29.123],[118.427,29.138],[118.402,29.123],[	118.422,29.138],[	118.409,29.148],[	118.403,29.123],[	118.404,29.147],
                [118.403,29.122],[118.401,29.145],[118.403,29.121],[118.395,29.136]
            ];
            this.isshouji = !this.isshouji
            if(this.isshouji){
                this.addPloygonLine()
                this.shoujiTimer = setInterval(()=>{
                    for(let i = 0;i<this.shoujiNewLength;i++){
                        viewer.entities.removeById("shouji"+i)
                    }
                    var random1 = Math.random()*(shoujiArr.length - 0)+0;
                    var random2 = Math.random()*(shoujiArr.length - 0)+0;
                    this.random1 = parseInt(random1)
                    this.random2 = parseInt(random2)
                    console.log(this.random1,this.random2)
                    var shoujiArr1 = [];
                    if(this.random1>this.random2){
                        shoujiArr1 = shoujiArr.slice(this.random2,this.random1 + 1);
                    }
                    if(this.random1<this.random2){
                        shoujiArr1 = shoujiArr.slice(this.random1,this.random2+1);
                    }
                    this.shoujiNewLength = shoujiArr1.length;
                    console.log(shoujiArr1.length)
                    shoujiArr1.forEach((item,index)=>{
                        let x=1;
                        let flog=true;
                        viewer.entities.add({
                            id:"shouji" + index,
                            position:Cesium.Cartesian3.fromDegrees(item[0],item[1],10),
                            point : {
                                show : true, // default
                                color :new Cesium.CallbackProperty(function () {
                                    if(flog){
                                        x=x - 0.05;
                                        if(x<=0){
                                            flog=false;
                                        }
                                    }else{
                                        x=x + 0.05;
                                        if(x>=1){
                                            flog=true;
                                        }
                                    }
                                    return Cesium.Color.RED.withAlpha(x);
                                },false),
                                pixelSize : 10, // default: 1
                                outlineWidth :0
                            }
                        });
                    })
                },3000)

            }else{
                this.removePloygonLine()
                for(let i = 0;i<this.shoujiNewLength;i++){
                    viewer.entities.removeById("shouji"+i)
                }
                clearInterval(this.shoujiTimer)
                this.shoujiTimer = null;
            }
            
        },
        dianliang(){
            let that = this;
            this.isGongye = !this.isGongye
            this.$cp.flyTo(118.40496541923261,29.060450043562007,7947,6.254061960210822,-0.9818585101919686,6.283035435333126)
            if(this.isGongye){
                this.addPloygonLine()
                this.preRenderListener = viewer.scene.preRender.addEventListener(()=> {
                    this.dianliArr.forEach((item,index)=>{
                        const oneDiv = window.document.getElementById("yuanzhu"+index)
                        let elWidth = oneDiv.offsetWidth
                        let elHeight = oneDiv.offsetHeight // + 60
                        const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                        let domPosition = Cesium.Cartesian3.fromDegrees(item[0],item[1])
                        const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                        if (Cesium.defined(canvasPosition)) {
                            // 根据元素宽高及当前点屏幕坐标进行偏移
                            oneDiv.style.top = canvasPosition.y - elHeight*1.8 + 'px'
                            oneDiv.style.left = canvasPosition.x + elWidth/2  + 'px'
                        }
                    })
                })
            }else{
                this.removePloygonLine()
                if (this.preRenderListener) {
                    this.preRenderListener()
                    this.preRenderListener = null
                }
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/css/varibles.styl'
    .leftBottom
        width:vw(530)
        height:vh(227)
        box-sizing : border-box
        background: url('/images/left3.png') no-repeat
        background-size:cover
        display:flex
        padding:vh(20) vw(30)
        .leftBottomLeft
            //width:vw(225)
            .title
                display flex
                padding-bottom:vh(20)
                font-size vw(18)
                .titleImg
                    width:vw(23)
                    height:vh(23)
                    background: url('/images/fugong.png') no-repeat
                    background-size: cover
                    background-size 100% 100%
                    margin-right vw(5)
                    cursor:pointer
            .list
                width: vw(470)
                height: vh(150)
                display flex
                justify-content  space-around
                flex-direction row
                flex-wrap:wrap
                .details
                    width vw(32)
                    height vh(14)
                    border 1px solid #45F4F7
                    font-size vw(8)
                    border-radius vw(20)
                    text-align center
                    margin-top vh(15)
                    padding vh(5) vw(5)
                    color #45F4F7                
                .list1
                    padding vh(7) 0 vh(5) vw(10)
                    width: vw(215)
                    height: vh(55)
                    border-radius vw(3)
                    display: flex
                    background: linear-gradient(to right, #6199A9 ,rgba(0,0,0,0))
                    .listImg
                        width: vw(43)
                        height vh(43)
                        background: url('/images/fugong1.png') no-repeat
                        background-size: cover
                        background-size:100% 100%          
                        cursor:pointer                
                    .listContent
                        color #45F4F7
                        font-size vw(18)
                        padding vh(3) vw(10)
                        width vw(100)
                        .num-content
                            font-size vw(12)
                            color #fff
                            padding vh(4) 0
                .list2
                    padding vh(7) 0 vh(5) vw(10)
                    width: vw(215)
                    height: vh(55)
                    border-radius vw(3)
                    display: flex
                    background: linear-gradient(to right, #6199A9 ,rgba(0,0,0,0));
                    .listImg
                        width vw(43)
                        height vh(43)
                        background: url('/images/soil.png') no-repeat
                        background-size:cover
                        background-size:100% 100%
                        cursor:pointer                         
                    .listContent
                        color #45F4F7
                        font-size vw(14)
                        padding vh(1) vw(5)
                        width vw(120)
                        line-height:vh(18)
                        .num-content
                            font-size vw(10)
                            color #fff
                            padding vh(4) 0
                .list3
                    padding vh(7) 0 vh(5) vw(10)
                    width: vw(215)
                    height: vh(55)
                    border-radius vw(3)
                    display: flex
                    background: linear-gradient(to right, #6199A9 ,rgba(0,0,0,0))
                    .listImg
                        width: vw(43)
                        height vh(43)
                        background: url('/images/fugong3.png') no-repeat
                        background-size: cover
                        background-size:100% 100%
                        cursor:pointer                         
                    .listContent
                        color #45F4F7
                        font-size vw(18)
                        padding vh(3) vw(10)
                        width vw(100)
                        
                        .num-content
                            font-size vw(12)
                            color #fff
                            padding vh(4) 0
                .list4
                    padding vh(7) 0 vh(5) vw(10)
                    width: vw(215)
                    height: vh(55)
                    border-radius vw(3)
                    display: flex
                    background: linear-gradient(to right, #6199A9 ,rgba(0,0,0,0));
                    .listImg
                        width:vw(43)
                        height vh(43)
                        background: url('/images/fugong4.png') no-repeat
                        background-size:cover
                        background-size:100% 100%
                        cursor:pointer                       
                    .listContent
                        color #45F4F7
                        font-size vw(18)
                        padding vh(3) vw(5)
                        width vw(120)
                        line-height:vh(20)
                        .num-content
                            font-size vw(12)
                            color #fff
                            padding vh(4) 0
</style>